<template>
	<view class="container">
		<wjf-stat-breadcrumb :routes="routes"></wjf-stat-breadcrumb>
		<uni-forms ref="form" :value="formData" validate-trigger="submit" err-show-type="toast">
			<uni-forms-item name="nickname" :label="$w('昵称')">
				<uni-easyinput :placeholder="$w('请输入昵称')" v-model="formData.nickname" trim="both"
					:inputBorder="false" />
			</uni-forms-item>
			<view class="note-box">
				<text>{{$w('设置后，用于大部分场景的显示。')}}</text>
			</view>
			<!-- <view class="">
				<button type="default" @click="test">test</button>
			</view> -->
			<view class="uni-button-group">
				<button type="primary" class="uni-button" @click="submit">{{$w('提交保存')}}</button>
			</view>
		</uni-forms>
		<!-- <view class="">
			<button type="default" @click="test">test</button>
		</view> -->
		<uv-toast-wjf ref="uvToastWjf"></uv-toast-wjf>
		<uv-modal ref="uvModal" :title="uvModelParam.title" :content='uvModelParam.content' :align="uvModelParam.align"
			:confirmText="uvModelParam.confirmText" :cancelText="uvModelParam.cancelText"
			:showCancelButton="uvModelParam.showCancelButton"></uv-modal>

	</view>
</template>

<script>
	import {
		mapActions,
	} from 'vuex';
	import {
		// store as uniIdStore,
		mutations as uniIdMutations
	} from '@/uni_modules/uni-id-pages/common/store.js';
	import commMixinWjf from '@/common/mixin/common-mixin-wjf.js'
	import mixinRules from './mixin-rules';
	const db = uniCloud.database();
	import message from '../i18n/index.js'
	const $w = (key) => {
		return message[uni.getLocale()][key]
	}
	export default {
		mixins: [commMixinWjf, mixinRules],
		data() {
			return {
				formData: {
					nickname: "",
				},
			};
		},
		onLoad() {
			if (this.userInfo.nickname) {
				this.formData.nickname = this.userInfo.nickname;
			}
		},
		onReady() {
			this.$refs.form.setRules(this.rules)
		},
		computed: {
			locaLang() {
				return uni.getLocale()
			},
			$w() {
				return $w
			},
			routes() {
				return [{
						to: "/pages/index/user",
						name: this.$w("用户中心"),
					},
					{
						to: "/pages/user/info/info",
						name: this.$w("用户信息"),
					},
					{
						to: "",
						name: this.$w("昵称"),
					}
				]
			}
			// rules() {
			// 	return rules
			// }
		},
		// After setting, used for display in most scenarios.
		methods: {
			async test() {
				this.$uvToastWjf({
					message: 'After setting, used for display in most scenarios.'
				})
				// console.log(this.$refs.uvModal);
			},
			...mapActions({
				getUserInfo: 'user/getUserInfo',
			}),
			submit() {
				this.$refs.form.validate().then(res => {
					this.submitForm(res)
				}).catch(err => {
					// console.log(err);
				})

			},
			async submitForm(params) {
				uni.showLoading({
					title: '',
					mask: false
				});
				let {
					result
				} = await db.collection("uni-id-users").where(
					`'_id' != $cloudEnv_uid && 'nickname' == '${this.formData.nickname}'`).field('nickname').get()
				console.log(result.data);
				uni.hideLoading()
				if (result.data.length > 0) {
					this.$uvToastWjf({
						message: this.$w('此昵称已被使用，请更换')
					})
					return
				} else {
					this.update()
				}
			},
			update() {
				let newUserInfo = Object.assign({}, this.userInfo, {
					nickname: this.formData.nickname
				})
				this.$uvModal({
					content: this.$w("是否确定修改？"),
					align: 'center',
					showCancelButton: true
				}, () => {
					db.collection("uni-id-users").doc(this.userInfo._id).update({
						nickname: this.formData.nickname
					}).then(res => {
						this.$uvToastWjf({
							message: this.$w("修改成功"),
							type: 'success'
						})
						uniIdMutations.setUserInfo(newUserInfo)
						this.getUserInfo()
						// this.navTimeBack();
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.container {
		max-width: 800px;
		height: 100vh;
		/* 设置最大宽度 */
		margin: 0 auto;
		/* 居中显示 */
		// padding: 20px;
		/* 添加内边距（可选） */
		background-color: rgba(240, 240, 240, 1);
	}

	.uni-button-group {
		position: fixed;
		bottom: calc(var(--window-bottom) + 40rpx);
		left: 70rpx;
		right: 70rpx;
		display: flex;

		// .uni-button {
		// 	flex: 1;
		// }
	}

	.uni-forms .uni-forms-item {
		background: #fff;
		padding: 6rpx;
		padding-left: 22rpx;
	}

	.note-box {
		padding: 20px;
		color: #555;
	}
</style>